<template>
    <div>
        <el-card>
            <h3 class="login-title">欢迎登录</h3>
            <el-form :inline=true :model="userForm" :rules="rulesForm" ref="userForm_">
                <el-form-item label="姓名" prop="name" label-width="100px">
                    <el-input v-model="userForm.name" placeholder="请输入名字"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="100px">
                    <el-input v-model="userForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-button class="btn" type="primary" @click="login">登录</el-button>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import Mock from 'mockjs'
import Cookie from 'js-cookie'
import { login } from '../api/emp'

export default ({
    name: 'Login',
    data() {
        return {
            userForm: {
                name: '',
                password: ''
            },
            rulesForm: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度为6-20位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login() {
            this.$refs.userForm_.validate((valid) => {
                if (valid) {
                    console.log(this.userForm)
                    console.log("登陆成功")
                    //在这里进行springboot的ajax请求
                    //校验账号密码，后台返回token
                    login(this.userForm).then(res => {
                        console.log("发送了后端请求")
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                            return;
                        }
                        // //模拟生成一个token
                        // const token = Mock.Random.guid();
                        // console.log(token)
                        // //存入Cookie
                        // Cookie.set('token', res.data.data)
                        //存入 localStorage
                        localStorage.setItem('token', res.data.data)
                        this.$router.push({
                            name: 'home'
                        })         
                    }).catch(error => {
                        this.$message({
                            type: 'error',
                            message: "请求接口出错"
                        })
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }

})
</script>
<style lang="less" scoped>
.el-card {
    width: 400px;
    margin: auto;
    margin-top: 200px;
    box-shadow: 0 0 25px #8f2297;

    h3 {
        margin-left: 140px;
    }

    .el-form {
        width: 350px;
    }

    .btn {
        width: 320px;
        margin-left: calc(10% - 14px)
    }
}

.btn {
    padding: 1rem 2.5rem;
    border: none;
    outline: none;
    border-radius: 0.4rem;
    background-color: rgb(14, 14, 16);
    color: rgb(234, 234, 234);

    /* 设置过渡时间 */
    transition: 1s;
}

/* 设置悬浮样式 */
.btn:hover {
    background: linear-gradient(180deg,
            rgba(2, 29, 78, 0.681) 0%,
            rgba(31, 215, 232, 0.873) 60%);
    color: rgb(4, 4, 38);
}
</style>